<template>
  <div class="regist">
    <div class="login-wrap">
      <el-button
        class="return-button"
        type="text"
        @click="goBack"
      >
        <i class="el-icon-arrow-left">返回首页</i>
      </el-button>
      <el-form
        class="login-form"
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        label-width="100px"
      >
        <h2>Reset Your Pwd</h2>
        <el-form-item label="用户名" prop="userName">
          <el-input
            type="text"
            v-model="ruleForm.userName"
            prefix-icon="el-icon-user-solid"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
            prefix-icon="el-icon-lock"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
            prefix-icon="el-icon-lock"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="login-button"
            type="warning"
            @click="handleReSet('ruleForm')"
            >重置密码</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    var validateUserName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        userName: "",
        password: "",
        checkPass: "",
      },
      rules: {
        userName: [{ validator: validateUserName, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    handleReSet(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { userName, password } = this.ruleForm;
          axios.post('/users/resetPassword', {
            userName,
            password
          })
          .then(response => {
            if (response.data.success) {
              this.$message({
                type: "success",
                message: "密码修改成功",
              });
              this.$router.push({ path: '/' });
            } else {
              this.$message.error(response.data.message || "数据不符，请检查输入");
            }
          })
          .catch(error => {
            console.error("修改密码失败:", error);
            this.$message.error("修改密码失败");
          });
        } else {
          this.$message.error("请正确填写表单");
        }
      });
    },
    goBack() {
      this.$router.push({ path: "/" });
    },
  },
}
</script>

<style scoped>
.regist {
  background-color: #324152;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.login-wrap .login-form {
  background-color: #fff;
  width: 400px;
  padding: 30px;
  border-radius: 5px;
}

.login-wrap .login-title {
  font-size: 26px;
  font-weight: bold;
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

.login-wrap .login-form .login-button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-wrap .login-form .login-button {
  width: 100%;
}
.login-wrap .return-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
</style>